<template>
  <div class="publish">
    <img v-show="!imgSrc" @click="CloseCamera" src="@/assets/camera/back.png" class="close" alt="">
    <img v-show="imgSrc" @click="CloseCamera" src="@/assets/camera/close.png" class="close" alt="">
    <img v-show="imgSrc" class="confirm" @click="confirmImg" src="@/assets/camera/queding.png" alt="">
    <video width="100%" height="100%" ref="video" v-show="!imgSrc"></video>
    <canvas id="canvasCamera" v-show="!imgSrc"></canvas>
    <div v-show="imgSrc" class="img_bg_camera">
      <img :src="imgSrc" class="tx_img" alt=""/>
    </div>
    <button class="camera-button" @click="setImage" v-show="!imgSrc"></button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaStreamTrack: {},
      video_stream: "", // 视频stream
      imgSrc: "", // 拍照图片
      canvas: null,
      context: null,
      blob: ''
    };
  },
  mounted() {
    // 进入页面 自动调用摄像头
    this.getCamera();
  },
  methods: {
    // 调用打开摄像头功能
    getCamera() {
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      // 正常支持版本 pda facingMode属性 前置摄像头 left right
      navigator.mediaDevices
          .getUserMedia({
            video: {facingMode: "user"},
            audio: false,
          })
          .then((stream) => {
            // 摄像头开启成功
            this.mediaStreamTrack =
                typeof stream.stop === "function" ? stream : stream.getTracks()[0];
            this.video_stream = stream;
            this.$refs.video.srcObject = stream;
            this.$refs.video.play();
          })
          .catch((err) => {
            console.log(err);
          });
    },
    confirmImg() {
      this.imgSrc = ''
      this.closeCamera()
      this.$emit('getImg', this.blob)
    },
    // 拍照 绘制图片
    setImage() {
      // const screenWidth = window.innerWidth;
      // const screenHeight = window.innerHeight;
      const videoElement = this.$refs.video;


      const canvas = document.createElement("canvas");
      canvas.width = videoElement.videoWidth;
      canvas.height = videoElement.videoHeight;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

      // 点击canvas画图
      // this.context.drawImage(videoElement, 0, 0,this.canvas.width,this.canvas.height);
      // console.log("拍照", this.context.drawImage);
      // 获取图片base64链接 canvas
      // this.canvas = document.getElementById("canvasCamera");
      // this.canvas.style.display = "block";
      // console.log(this.canvas, "拍照 image ", this.canvas.style);
      const image = canvas.toDataURL("image/png");

      this.imgSrc = image;
      let that = this
      canvas.toBlob((blob) => {
        console.log(blob)
        // 在这里执行上传操作，将 blob 对象发送到服务器
        that.blob = blob
      }, 'image/jpeg'); // 上传的文件类型，这里假设为 JPEG 图片

      console.log(this.imgSrc, "拍照 image ", image);
    },
// 打开摄像头
    OpenCamera() {
      console.log("打开摄像头");
      this.getCamera();
    }
    ,
// 关闭摄像头
    CloseCamera() {
      console.log("关闭摄像头");
      if (this.imgSrc) {
        this.imgSrc = ''
        this.getCamera()
        this.closeCamera()
      } else {
        this.closeCamera()
        this.$emit('closeCamera')
      }

    },
    closeCamera() {
      this.$refs.video.srcObject.getTracks()[0].stop();
    }
  },
}
;
</script>

<style scoped>
.publish {
  position: fixed;
  height: 100vh;
  width: 100vw;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999999 !important;
}

.camera-button {
  display: inline-block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  position: fixed;
  bottom: 50px;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  cursor: pointer;
}

.camera-button:before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.camera-button:after {
  content: "";
  display: block;
  width: 8px;
  height: 30px;
  background-color: #ffffff;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

video {
  width: 100%;
  height: 100vh;
  background: #000;
}

.confirm {
  position: fixed;
  right: 20px;
  top: 40px;
  width: 30px;
  height: 30px;
  color: #fff;
  z-index: 999;
  font-size: 20px;
}

.close {
  position: fixed;
  left: 20px;
  top: 40px;
  width: 30px;
  height: 30px;
  color: #fff;
  z-index: 999;
  font-size: 20px;
}


button {
  width: 100px;
  height: 40px;
  position: relative;
  bottom: 0;
  left: 0;
  background-color: rgb(22, 204, 195);
}

.img_bg_camera {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: #000;
}

.img_bg_camera img {
  width: 100%;
}
</style>
